<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <!--<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
    <!-- <link href="vue.js" rel="stylesheet">-->
    <script src="javaScript/vue.js"></script>
    <!--<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>-->
    <script src="javaScript/jquery-3.7.1.min.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    .el-descriptions-item__label.is-bordered-label {
        width: 150px;
    }

    .el-pagination__sizes {
        font-size: 15px;
    }
</style>
<body>
<div id="shopsForm" style="width:max-content;margin: 0 auto;font-size: 15px">
    <div>
        <el-button size="medium" type="danger" @click="showAllShops">显示所有</el-button>
    </div>
    <div>
        <!-- 创建一个搜索框，并用v-model绑定到searchQuery数据属性 -->
        <input type="text" v-model="ids" placeholder="输入搜索内容">

        <!-- 可以在这里添加一个按钮来触发搜索操作 -->
        <button @click="findShop">搜索</button>
    </div>
    <template style="width:50%;margin: 0 auto">
        <el-table :data="shops" border style="width: 100%">
            <el-table-column prop="id" label="商品编号" width="120"></el-table-column>
            <el-table-column prop="name" label="商品名称" width="180"></el-table-column>
            <el-table-column prop="price" label="商品价格" width="120"></el-table-column>
            <el-table-column prop="storage" label="库存量" width="150"></el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button size="medium" type="danger" @click="removeShops(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
</div>
</body>
<script>
    let myVue = new Vue({
        el: "#shopsForm",
        data: {
            shops: [],
            shop:{
                id:0,
                names:'',
                price:0.0,
                storage:0
            },
            ids:''
        },
        methods: {
            showAllShops() {
                $.ajax({
                    url: '/Shop/showAllShops',
                    type: 'get',
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function (data) {
                        console.log(data);
                        myVue.shops = data;
                    }
                })
            },
            removeShops(id) {
                $.ajax({
                    url: '/Shop/removeShops',
                    type: "post",
                    data: {
                        id: id
                    },
                    // dataType: "json",
                    success: function (data) {
                        if(data=="success"){
                            myVue.showAllShops()
                        }
                    }
                })
            },
            findShop(){
                if (!this.ids) {
                    alert('输入不能为空！');
                    return;
                }

                // 检查输入是否只包含数字
                if (!/^\d+$/.test(this.ids)) {
                    alert('请输入一个有效的数字！');
                    return;
                }
                $.ajax({
                    url: '/Shop/findShop?id='+myVue.ids,
                    type: "get",
                    // dataType: "json",
                    success: function (data) {
                        if(data != null){
                            myVue.ids = ''
                            myVue.shops = data;
                        }else {
                            alert("不好意思,这个商品不存在")
                        }
                    }
                })
            }
        },
        created() {
            this.showAllShops();
        }
    })

</script>
</html>